<!--
 * @Author: 赵宇
 * @Description: 
 * @Date: 2024-01-22 16:35:49
 * @LastEditTime: 2024-08-21 20:16:18
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \dance\pages\main\components\screening.vue
-->

<template>
  <uv-popup ref="popup" safeAreaInsetTop bgColor="none" safeAreaInsetBottom confirmColor="#fff" width="20rem" @change="onChange">
    <view class="screening">
      <scroll-view scroll-y class="screening-box">
        <view class="content">
          <view v-for="item in props.data" class="content-item" :key="item" @click="onSwitchChange(item)">
            <zTag :label="item.label" :active="item.active" style="padding: 24rpx" />
          </view>
        </view>
        <view class="screening-box-confirm">
          <view class="screening-box-confirm-button" @click="onClickClose">确定</view>
        </view>
      </scroll-view>
    </view>
    <view class="bg"></view>
    <template v-slot:confirmButton>
      <view></view>
    </template>
  </uv-popup>
</template>

<script setup>
import { ref, defineProps, watch, defineEmits, reactive } from 'vue';
import zTag from './z-tag.vue'
let popup = ref(null);
let emit = defineEmits(['update:modelValue']);
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
watch(
  () => props.modelValue,
  val => {
    if (!val) return;
    popup.value.open();
  }
);
let onClickClose = () => {
  popup.value.close();
};
let onChange = ({ show }) => {
  emit('update:modelValue', show);
};
let onSwitchChange = (item, data = []) => {
  if (data.length) {
    data.forEach(item => {
      item.active = false;
    });
  }
  item.active = !item.active;
};
</script>

<style lang="scss" scoped>
.screening {
  background-color: #545866;
  color: #fff;
  width: 90vw;
  max-height: 85vh;
  padding: 0 35rpx;
  display: flex;
  flex-direction: column;
  &-box {
    width: 100%;
    z-index: 1;
    flex: 1;
    overflow: hidden;
    .content {
      display: flex;
      flex-wrap: wrap;
      &-item {
        width: 48%;
        margin: 0 1%;
        flex-wrap: wrap;
      }
    }
    &-confirm {
      margin: 0.5451rem 0;
      text-align: right;
      &-button {
        padding: 10rpx 40rpx;
        background-color: $dance-main-color;
        display: inline-block;
        border-radius: 56rpx;
      }
    }
  }
  .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(20rpx);
    transition: 0.5s ease;
    z-index: 0;
  }
  ::v-deep .uv-modal__content {
    background-color: rgba(59, 63, 79, 0.87);
    position: relative;
    padding: 20rpx {
      top: 30rpx !important;
    }
  }
  ::v-deep .uv-modal__button-group__wrapper {
    height: 0;
    flex: 0;
  }
}
</style>
